<template>
  <div :style="{height: `${height}px`}">
    <zb-table
        :columns="columnList"
        :data="tableData"
        :stripe="stripe"
        border
        :fit="true"
        :highlight="true"
        :isShowLoadMore="true"
        @rowClick="onRow"
        :pullUpLoading="pullLoading"
        @pullUpLoading="onPull"
        @toggleAllSelection="onAllSelection"
        @toggleRowSelection="toggleAllSelection"
		@onClick="onClick"
		@cellClick="cellClick"
		@onDetailEnquiry="onDetailEnquiry"
		:cell-style="cellStyle"
    ></zb-table>
  </div>
</template>

<script>
  export default {
    name: 'JkTable',
    props: {
      height: {
        type: [Number], // px
        default: 0
      },
	  cellStyle:{
		  type:Function,
	  },
      tableHeader: {
        type: Array,
        default() {
          return []
        }
      },
      tableData: {
        type: Array,
        default() {
          return []
        }
      },
      stripe: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        columnList: [],
        showPopup: false
      };
    },
    methods: {
      onRow(e) {
        this.$emit('row', e);
      },
      onPull() {
        this.$emit('pull');
      },
      pullLoading(done) {
        done();
      },
      onAllSelection(e, arr) {
        this.$emit('checked', arr);
      },
      toggleAllSelection(e, arr) {
        this.$emit('checked', arr);
      },
	  onClick(e, arr){
		   this.$emit('onClick', e);
	  },
	  cellClick(row ,index,column){
		   this.$emit('cellClick', row ,index,column);
	  },
	  onDetailEnquiry(row ,index,column){
		  this.$emit('onDetailEnquiry',row ,index,column)
	  }
    },
    watch: {
      tableHeader: {
        handler(newVal) {
          this.columnList = newVal.map(x => {
            x.name = x.key;
            x.label = x.title;
            return x;
          });
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
